<template>
  <div>
    <div class="nav">
      <van-icon name="arrow-left" @click="fh" />
      <div class="nav-box">
        <span class="nav-img"></span>
        <span class="nav-text">Zeng Wen</span>
      </div>
      <div class="nav-l">. . .</div>
    </div>
    <div class="centent-c">
      <span class="image t"></span>
      <span class="image l"></span>
      <span class="image-b">
        <span class="image-b-text">
          2002年，15岁的石原里美参加
          了HORIPRO公司第27回艺人新
          人选拔，获得最佳新人“完…
        </span>
      </span>
    </div>
  </div>
</template>

<style lang='scss'>
.nav {
  position: relative;
  margin-left: 42px;
  margin-top: 20px;
  .van-icon {
    vertical-align: middle;
    opacity: 0.6;
    font-size: 32px;
    color: #fff;
    display: inline-block;
  }
  .nav-box {
    margin-left: 38px;
    display: inline-block;
    vertical-align: middle;
    height: 64px;
    .nav-img {
      border-radius: 50%;
      background: url(~@/assets/images/wzb/news/zw2x.png) no-repeat center;
      background-size: 100% 100%;
      height: 64px;
      width: 64px;
      display: inline-block;
    }
    .nav-text {
      font-size: 28px;
      color: #ffffff;
      margin-left: 16px;
      vertical-align: 50%;
      display: inline-block;
      height: 64px;
    }
  }
  .nav-l {
    display: inline-block;
    position: absolute;
    right: 38px;
    vertical-align: middle;
    font-size: 40px;
    color: #fff;
    opacity: 0.6;
  }
}
.centent-c {
  margin: 0 40px;
  width: 670px;
  .image {
    display: inline-block;
    width: 180px;
    height: 64px;
  }
  .image.t {
    margin-top: 86px;
    display: inline-block;
    background: url(~@/assets/images/wzb/messages/hello2x.png) no-repeat center;
    background-size: 100% 100%;
  }
  .image-b {
    text-align: right;
    color: #fff;
    display: inline-block;
    width: 430px;
    height: 168px;
    background: url(~@/assets/images/wzb/messages/hello2.png) no-repeat center;
    background-size: 100% 100%;
  }
  .image-b-text {
    margin: 30px 0;
    font-size: 27px;
    text-align: left;
    display: inline-block;
    width: 382px;
    height: 108px;
  }
  .image.l {
    display: inline-block;
    background: url(~@/assets/images/wzb/messages/hello2x1.png) no-repeat center;
    background-size: 100% 100%;

    margin: 30px 0px 114px 490px;
  }
}
</style>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    //点击返回
    fh() {
      this.$router.go(-1);
    }
  },
  created() {}
};
</script>
